<template>
	<uni-datetime-picker v-model="value" :border="false" type="daterange" return-type="timestamp" @change="change">
		<view class="h-30 flex align-center justify-end">
			<text v-if="value">{{ timeFormatComputed(value[0]) }} - {{ timeFormatComputed(value[1]) }}</text>
			<text v-else class="gray9">{{ data.placeholder }}</text>
			<view v-if="value" style="padding: 0 5px;" @click.stop="clear"><uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons></view>
			<uni-icons :size="16" color="#bbb" type="arrowright" class="pr-2" />
		</view>
	</uni-datetime-picker>
</template>

<script setup lang="ts">
import { watch, ref, computed } from 'vue'
import timeFormat from '@/assets/js/timeFormat'

const props = defineProps({
	//表单组件参数
	data: {
		type: Object,
		required: true
	},
	modelValue: {}
})

watch(props, (val: any) => {
	if (val.modelValue) value.value = val.modelValue
})

const value = ref()
//修改双向绑定值
const emit = defineEmits(['update:modelValue'])
const change = (e: any) => {
	value.value = [e[0], e[1] + 86399000]
	emit('update:modelValue', value.value)
}

const clear = () => {
	value.value = null
	emit('update:modelValue', '')
}

//时间格式化
const timeFormatComputed = computed(() => {
	return (val: number | string) => {
		return timeFormat(val, 'yyyy-mm-dd')
	}
})
</script>

<style lang="scss" scoped></style>
